<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>调试视频流</title>
        <script src="./axios.min.js"></script>
        <script src="./hls.js"></script>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @keyframes run {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .top {
            margin-bottom: 20px;
        }
        .top .input {
            outline: none;
            border: 1px solid #a4a4a4;
            flex: 1;
            margin-left: 10px;
            padding: 10px;
            font-size: 18px;
            border-radius: 5px;
        }
        .top .btn {
            background-color: #4caf50;
        }

        .top .btn:active {
            background-color: #3f8f42;
        }
        .top .reset:active {
            background-color: #8e8b8b;
        }

        .loading {
            animation: run 2s linear 0s infinite;
            height: 16px;
            width: auto;
            display: none;
        }
        button {
            width: 100px;
            cursor: pointer;
            background-color: #9e9e9e;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 0;
            margin-right: 15px;
        }
        .inputView {
            display: flex;
            width: 100%;
            margin: 10px 0;
            align-items: center;
        }
        .handler {
            display: flex;

            align-items: stretch;
        }
        #video {
            width: 100%;
            display: none;
        }
    </style>
    <body>
        <div class="top" style="padding: 20px">
            <h3>设备调试视频流</h3>
            <div class="inputView">设备ID:<input type="text" class="input" value="" /></div>
            <div class="handler">
                <button class="btn">
                    <img class="loading" src="./loading.svg" alt="" />
                    Go
                </button>
                <button class="reset">Reset</button>
            </div>
        </div>
        <video id="video" controls></video>

        <script>
            // AA2617720
            let input = document.querySelector(".input");
            let btn = document.querySelector(".btn");
            let reset = document.querySelector(".reset");
            let video = document.getElementById("video");
            let showValue = document.getElementById("showValue");
            let loading = document.querySelector(".loading");
            let camera = document.querySelector(".camera");

            let Url = "https://iot.meseeagro.com/api/v1/data/debug_pull_video_flow";
            let mellUrl = "https://middleware.meseelink.com/streaming";
            let hls = null;

            if (Hls.isSupported()) {
            } else {
                alert(" 您的浏览器不支持视频格式！");
            }
            reset.onclick = function () {
                video.src = "";
                input.value = "";
                video.style.display = "none";
                loading.style.display = "none";
                if (hls) {
                    hls.off();
                    hls.stopLoad();
                    hls.destroy();
                } else {
                }
            };
            btn.onclick = async function () {
                loading.style.display = "inline-block";
                video.style.display = "block";

                let value = input.value;
                if (value) {
                    try {
                        const {
                            data: { data },
                        } = await axios.get(Url, {
                            params: { hik_number: value },
                        });
                        const { hik_number_code } = data;

                        const resp = await axios.get(mellUrl, {
                            params: {
                                code: hik_number_code,
                            },
                        });
                        hls = new Hls();
                        let mell = resp.data.data;
                        hls.attachMedia(video);
                        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
                            hls.loadSource(mell);
                            hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                                // console.log(event, data);
                                loading.style.display = "none";
                                video.play();
                            });
                        });
                    } catch (error) {
                        if (error) {
                            alert("id号错误！");
                        }
                    }
                } else {
                    alert("id号未确认");
                }
            };
        </script>
    </body>
</html>
